<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<%@ include file="common/head.jsp" %>

<div class="page-wrapper">

    <div class="main-container">
        

	    <div class="container-fluid">
	        <div class="row">
	            <div class="col-md-12">
	                <div class="card">
	                    <div class="card-header bg-light">
	                        Basic Forms
	                    </div>
	
	                    <div class="card-body">
	                        <div class="row">
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="normal-input" class="form-control-label">Normal Input</label>
	                                    <input id="normal-input" class="form-control" value="Input value">
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="read-only" class="form-control-label">Read Only</label>
	                                    <input id="read-only" class="form-control" value="Input value" readonly>
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="disabled-input" class="form-control-label">Disabled Input</label>
	                                    <input id="disabled-input" class="form-control" value="Input value" disabled>
	                                </div>
	                            </div>
	                        </div>
	
	                        <div class="row mt-4">
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="placeholder-input" class="form-control-label">Placeholder</label>
	                                    <input id="placeholder-input" class="form-control" placeholder="Placeholder text">
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="required-input" class="require">Required</label>
	                                    <input id="required-input" class="form-control" value="Input value">
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label class="form-control-label">Static</label>
	                                    <p class="form-control-plaintext">email@example.com</p>
	                                </div>
	                            </div>
	                        </div>
	
	                        <div class="row mt-4">
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="help-text-input" class="form-control-label">Help text</label>
	                                    <input id="help-text-input" class="form-control" placeholder="Enter email">
	                                    <small class="form-text">We'll never share your email with anyone else.</small>
	                                </div>
	                            </div>
	                        </div>
	
	                        <div class="row mt-4">
	                            <div class="col-md-4">
	                                <label>Sizes</label>
	
	                                <div class="form-group">
	                                    <input type="text" class="form-control form-control-sm" placeholder="Small">
	                                </div>
	
	                                <div class="form-group">
	                                    <input type="text" class="form-control" placeholder="Normal">
	                                </div>
	
	                                <div class="form-group">
	                                    <input type="text" class="form-control form-control-lg" placeholder="Large">
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="single-select">Example select</label>
	                                    <select id="single-select" class="form-control">
	                                        <option>1</option>
	                                        <option>2</option>
	                                        <option>3</option>
	                                        <option>4</option>
	                                        <option>5</option>
	                                    </select>
	                                </div>
	
	                                <div class="form-group">
	                                    <label for="multi-select">Example multiple select</label>
	                                    <select id="multi-select" class="form-control" multiple="">
	                                        <option>1</option>
	                                        <option>2</option>
	                                        <option>3</option>
	                                        <option>4</option>
	                                        <option>5</option>
	                                    </select>
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <div class="form-group">
	                                    <label for="textarea">Example textarea</label>
	                                    <textarea id="textarea" class="form-control" rows="6"></textarea>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	
	        <div class="row mt-4">
	            <div class="col-md-12">
	                <div class="card">
	                    <div class="card-header bg-light">
	                        Input Groups
	                    </div>
	
	                    <div class="card-body">
	                        <div class="row">
	                            <div class="col-md-4">
	                                <label>Text addon</label>
	
	                                <div class="input-group mb-3">
	                                    <div class="input-group-prepend">
	                                        <span class="input-group-text">@</span>
	                                    </div>
	                                    <input type="text" class="form-control" placeholder="Username">
	                                </div>
	
	                                <div class="input-group mb-3">
	                                    <input type="text" class="form-control" placeholder="Recipient's username">
	                                    <div class="input-group-append">
	                                        <span class="input-group-text">@</span>
	                                    </div>
	                                </div>
	
	                                <div class="input-group mb-3">
	                                    <div class="input-group-prepend">
	                                        <span class="input-group-text">$</span>
	                                    </div>
	                                    <input type="text" class="form-control">
	                                    <div class="input-group-append">
	                                        <span class="input-group-text">.00</span>
	                                    </div>
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <label>Icon addon</label>
	
	                                <div class="input-group mb-3">
	                                    <div class="input-group-prepend">
	                                        <span class="input-group-text"><i class="fa fa-user"></i></span>
	                                    </div>
	                                    <input type="text" class="form-control" placeholder="Username">
	                                </div>
	
	                                <div class="input-group mb-3">
	                                    <input type="text" class="form-control" placeholder="Email address" aria-describedby="basic-addon2">
	                                    <div class="input-group-append">
	                                        <span class="input-group-text"><i class="fa fa-envelope"></i></span>
	                                    </div>
	                                </div>
	
	                                <div class="input-group mb-3">
	                                    <div class="input-group-prepend">
	                                        <span class="input-group-text"><i class="fa fa-credit-card"></i></span>
	                                    </div>
	                                    <input type="text" class="form-control" placeholder="Card Number">
	                                    <div class="input-group-append">
	                                        <span class="input-group-text"><i class="fa fa-hashtag"></i></span>
	                                    </div>
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <label>Sizes</label>
	
	                                <div class="input-group input-group-lg mb-3">
	                                    <div class="input-group-prepend">
	                                        <span class="input-group-text">@</span>
	                                    </div>
	                                    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
	                                </div>
	
	                                <div class="input-group mb-3">
	                                    <div class="input-group-prepend">
	                                        <span class="input-group-text">@</span>
	                                    </div>
	                                    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
	                                </div>
	
	                                <div class="input-group input-group-sm mb-3">
	                                    <div class="input-group-prepend">
	                                        <span class="input-group-text">@</span>
	                                    </div>
	                                    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
	                                </div>
	                            </div>
	                        </div>
	
	                        <div class="row mt-4">
	                            <div class="col-md-4">
	                                <label for="input-group-1">Input Group with Button</label>
	                                <div class="input-group">
	                                    <span class="input-group-btn">
	                                        <button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
	                                    </span>
	                                    <input type="text" id="input-group-1" name="input1-group2" class="form-control" placeholder="Username">
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <label for="input-group-2">Input Group with Button</label>
	                                <div class="input-group">
	                                    <input type="text" id="input-group-2" name="input1-group2" class="form-control" placeholder="Username">
	                                    <span class="input-group-btn">
	                                        <button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
	                                    </span>
	                                </div>
	                            </div>
	
	                            <div class="col-md-4">
	                                <label for="input-group-3">Input Group with Dropdown</label>
	                                <div class="input-group">
	                                    <div class="input-group-btn">
	                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action
	                                            <span class="caret"></span>
	                                        </button>
	
	                                        <div class="dropdown-menu" x-placement="bottom-start">
	                                            <a class="dropdown-item" href="#">Action</a>
	                                            <a class="dropdown-item" href="#">Another action</a>
	                                            <a class="dropdown-item" href="#">Something else here</a>
	                                            <div role="separator" class="dropdown-divider"></div>
	                                            <a class="dropdown-item" href="#">Separated link</a>
	                                        </div>
	                                    </div>
	
	                                    <input type="text" id="input-group-3" name="input1-group3" class="form-control" placeholder="Username">
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	
	        <div class="row mt-4">
	            <div class="col-md-12">
	                <div class="card">
	                    <div class="card-header bg-light">
	                        Switches
	                    </div>
	
	                    <div class="card-body">
	                        <div class="row">
	                            <div class="col-md-3">
	                                <div class="toggle-switch">
	                                    <label for="ts1" class="ts-label">Toggle Swith Default</label>
	                                    <input id="ts1" type="checkbox" hidden="hidden">
	                                    <label for="ts1" class="ts-helper"></label>
	                                </div>
	                            </div>
	
	                            <div class="col-md-3">
	                                <div class="toggle-switch" data-ts-color="primary">
	                                    <label for="ts2" class="ts-label">Primary Toggle Switch</label>
	                                    <input id="ts2" type="checkbox" hidden="hidden">
	                                    <label for="ts2" class="ts-helper"></label>
	                                </div>
	                            </div>
	
	                            <div class="col-md-3">
	                                <div class="toggle-switch" data-ts-color="secondary">
	                                    <label for="ts3" class="ts-label">Secondary Toggle Switch</label>
	                                    <input id="ts3" type="checkbox" hidden="hidden">
	                                    <label for="ts3" class="ts-helper"></label>
	                                </div>
	                            </div>
	
	                            <div class="col-md-3">
	                                <div class="toggle-switch" data-ts-color="success">
	                                    <label for="ts4" class="ts-label">Success Toggle Switch</label>
	                                    <input id="ts4" type="checkbox" hidden="hidden">
	                                    <label for="ts4" class="ts-helper"></label>
	                                </div>
	                            </div>
	                        </div>
	
	                        <hr>
	
	                        <div class="row mt-4">
	                            <div class="col-md-3">
	                                <div class="toggle-switch" data-ts-color="info">
	                                    <label for="ts5" class="ts-label">Info Swith Default</label>
	                                    <input id="ts5" type="checkbox" hidden="hidden">
	                                    <label for="ts5" class="ts-helper"></label>
	                                </div>
	                            </div>
	
	                            <div class="col-md-3">
	                                <div class="toggle-switch" data-ts-color="warning">
	                                    <label for="ts6" class="ts-label">Warning Toggle Switch</label>
	                                    <input id="ts6" type="checkbox" hidden="hidden">
	                                    <label for="ts6" class="ts-helper"></label>
	                                </div>
	                            </div>
	
	                            <div class="col-md-3">
	                                <div class="toggle-switch" data-ts-color="danger">
	                                    <label for="ts7" class="ts-label">Danger Toggle Switch</label>
	                                    <input id="ts7" type="checkbox" hidden="hidden">
	                                    <label for="ts7" class="ts-helper"></label>
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	    
	</div>
	
</div>

<%@ include file="common/bottom.jsp" %>
